﻿@page
@{ Layout = "_Layout"; }
@section Styles{
  <link rel="stylesheet" href="/sitefiles/assets/css/github-markdown.css">
  <style>
    .el-card__body .el-form-item {
      margin-bottom: 5px;
    }
  </style>
}

<el-form v-on:submit.native.prevent :inline="true" size="mini">
  <el-form-item label="关键字">
    <el-input v-model="keyword" placeholder="请输入关键字..."></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" v-on:click="btnSearchClick">搜索插件</el-button>
    <el-button size="mini" type="primary" plain style="margin-left: 0px;" icon="el-icon-upload" v-on:click="btnUploadClick">
      离线安装/更新插件
    </el-button>
  </el-form-item>
</el-form>

<template v-if="q">
  <div style="margin-bottom: 10px;" v-if="extensionWithReleases && extensionWithReleases.length > 0">搜索到 {{extensionWithReleases.length}} 个结果</div>
  <div style="margin-bottom: 10px;" v-else>未找到搜索结果，建议更换搜索词</div>
</template>

<el-row>
  <el-col :span="6" v-for="(item, index) in extensionWithReleases" :key="index">
    <el-card style="margin-bottom: 15px; margin-right: 15px;">
      <div slot="header" class="clearfix">
        <span>
          <el-link :underline="false" type="primary" v-on:click="btnViewClick(item)">
            {{ item.extension.displayName }}
          </el-link>
        </span>
      </div>
      <div style="text-align: center;">
        <el-link :underline="false" type="primary" v-on:click="btnViewClick(item)">
          <el-badge :value="isInstalled(item.extension) ? '已安装' : '未安装'" :type="isInstalled(item.extension) ? 'success' : 'info'">
            <el-image 
              style="width: 150px; height: 150px; cursor: pointer; margin: 10px"
              :src="getIconUrl(item.extension.iconUrl)">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </el-badge>
        </el-link>
      </div>
      <el-form v-on:submit.native.prevent size="mini" label-width="70px">
        <el-form-item label="标识">
          <el-link :underline="false" type="primary" v-on:click="btnViewClick(item)">
            {{ item.extension.userName }}.{{ item.extension.name }}
          </el-link>
        </el-form-item>
        <el-form-item label="插件版本">
          {{ item.release.version }}
        </el-form-item>
        <el-form-item label="发布时间">
          {{ item.release.createdDate }}
        </el-form-item>
      </el-form>
      <div :title="item.extension.description" class="cell" style="font-size: 14px; text-align: left; overflow-y: hidden; height: 15px;; height: 35px; overflow: hidden">
        {{ item.extension.description }}
      </div>
    </el-card>
  </el-col>
</el-row>

@section Scripts{
  <script src="/sitefiles/assets/js/admin/plugins/add.js" type="text/javascript"></script>
}